<template>
  <div class="group relative overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-all">
    <img 
      :src="item.image" 
      :alt="item.title ? item.title : `作品集${item.id}`" 
      class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"
    >
    <template v-if="item.title">
      <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end">
        <div class="p-3 text-white">
          <h4 class="font-bold text-sm">{{ item.title }}</h4>
          <p class="text-xs text-gray-200">{{ item.category }}</p>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
const props = defineProps({
  item: Object
})
</script>